<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>{{type=='isLoading'?'查看':type=='isError'?'填写':!type?'填写':''}}入驻申请资料</text>
		</pageHeader>
		<view class="tip" v-if="needTip">
			<text>{{tipText?tipText:'审核中：工作人员会在三个工作日内审核完成，请及时查看。'}}</text>
			<image src="/static/svg/shenhecha.svg" mode="" @tap='needTip=!needTip'></image>
		</view>
		<view style="height:16rpx;background-color:#F5F5F5;"></view>
		<view class="title">
			<text class="title_word">请填写基础信息</text>
		</view>
		<view class="message head">
			<text class="important">*</text>
			<view class="key">头像</view>
			<image src="/static/svg/defaultHead.svg" class="defaultHead" @tap="toAddImg" data-type='head' v-if="!headImg"></image>
			<image :src="headImg" class="defaultHead" @tap="toAddImg" data-type='head' v-if="headImg"></image>
			<image src="/static/svg/moreandmore.svg" class="more" @tap="toAddImg" data-type='head' v-if="!readOnly"></image>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">姓名</view>
			<input type="text" placeholder="请与身份证上的姓名保持一致" placeholder-style="color:#999999" v-model.trim="name" :disabled='readOnly||isDesignerToEdit' :maxlength='8'/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">性别</view>
			<view class="sex">
				<view class="man" @tap="chooseSex" data-type='男' :class="{sex_active:sex=='男'}">
					<view></view>
					<text>男</text>
				</view>
				<view class="man" @tap="chooseSex" data-type='女' :class="{sex_active:sex=='女'}">
					<view></view>
					<text>女</text>
				</view>
			</view>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">出生日期</view>
			<ePicker mode="date" @btnConfirm='chooseBirthDay' :startYear="startDate" :defaultValue='birthDay?birthDay:endDate' :endYear="endDate" :disabled='readOnly||isDesignerToEdit'>
				<view class="value" v-if="!birthDay">请选择出生日期</view>
				<view class="value" v-if="birthDay" style="color: #333333;">{{birthDay.replace('-','年').replace('-','月')+'日'}}</view>
				<image src="/static/svg/moreandmore.svg" class="more" v-if="!readOnly&&!isDesignerToEdit"></image>
			</ePicker>	
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">学历</view>
			<picker mode="selector" :range="educationList" @change="changeEducation" :disabled='readOnly' :value='defualteducation'>
				<view class="value" v-if="education" style="color: #333333">{{education}}</view>
				<view class="value" v-else>请选择学历</view>	
				<image src="/static/svg/moreandmore.svg" class="more" v-if="!readOnly"></image>
			</picker>	
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">专业</view>
			<input type="text" placeholder="请填写专业" placeholder-style="color:#999999" :maxlength='8' :disabled='readOnly' v-model.trim="major"/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">联系方式</view>
			<input type="number" placeholder="请填写联系方式" placeholder-style="color:#999999" :maxlength='11' :disabled='readOnly' @blur='toCheckError($event,"phone")' @focus='phoneError = false' v-model='phone'/>
			<image src="/static/svg/gantnhao.svg" mode="" class="gantanhao" v-if="phoneError"></image>
		</view>
		<view class="message">
			<view class="key">邮箱</view>
			<input type="text" :placeholder="readOnly?'':'请填写邮箱'" placeholder-style="color:#999999" :maxlength='50' @blur='toCheckError($event,"email")' @focus='emailError = false' :disabled='readOnly' v-model.trim="email"/>
			<image src="/static/svg/gantnhao.svg" mode="" class="gantanhao" v-if="emailError"></image>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">所在城市</view>
			<addressPicker @pickerConfirm='changeCity' :disabled='readOnly' :defaultProvince='locationCity.province?locationCity.province:"广东省"' :defaultCity='locationCity.city?locationCity.city:"深圳市"' :defaultaArea='locationCity.area?locationCity.area:"南山区"'>
				<view class="value" v-if="locationCity.fullPath" style="color: #333333">{{locationCity.fullPath}}</view>
				<view class="value" v-else>请选择所在城市</view>	
				<image src="/static/svg/moreandmore.svg" class="more" v-if="!readOnly"></image>
			</addressPicker>	
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">入行年份</view>
			<picker mode="selector" :range="getYearList" @change="changeYear" :disabled='readOnly||isDesignerToEdit' :value='defualtEntryYear'>
				<view class="value" v-if="!entryYear">请选择入行年份</view>
				<view class="value" v-else style="color: #333333;">{{entryYear}}</view>
				<image src="/static/svg/moreandmore.svg" class="more" v-if="!readOnly&&!isDesignerToEdit"></image>
			</picker>
		</view>
		<view class="title" style="margin-top: 10rpx;">
			<text>*</text>
			<text class="title_word">上传证件照片</text>
		</view>
		<view class="IDCard">
			<view v-if="!frontOfIDCard">
				<image src="/static/svg/zhengmian.svg"   @tap="toAddImg" data-type='front'></image>
			</view>
			<imgDele :src="frontOfIDCard" mode="aspectFill" @imgTap='frontOfIDCardTap' :disabled='readOnly||isDesignerToEdit'  @deleSuccess='deleFrontOfIDCard' v-else></imgDele>
			<view  v-if="!backOfIDCard">
				<image src="/static/svg/fanmian.svg"  @tap="toAddImg" data-type='back'></image>
			</view>
			<imgDele :src="backOfIDCard" mode="aspectFill" @imgTap='backOfIDCardTap' :disabled='readOnly||isDesignerToEdit'  @deleSuccess='deleBackOfIDCard' v-else></imgDele>
		</view>
		<view class="title">			<text class="title_word">请填写公司信息</text>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">公司名称</view>
			<input type="text" placeholder="请填写公司名称" placeholder-style="color:#999999" :maxlength='20' :disabled='readOnly||isDesignerToEdit' v-model.trim="corporateName"/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">办公地址</view>
			<addressPicker @pickerConfirm='changeAddress' :defaultProvince='officeAddress.province?officeAddress.province:"广东省"' :defaultCity='officeAddress.city?officeAddress.city:"深圳市"' :defaultaArea='officeAddress.area?officeAddress.area:"南山区"' :disabled='readOnly||isDesignerToEdit'>
				<view class="value" v-if="officeAddress.fullPath" style="color: #333333">{{officeAddress.fullPath}}</view>
				<view class="value" v-else>请选择省市区</view>
				<image src="/static/svg/moreandmore.svg" class="more" v-if="!readOnly&&!isDesignerToEdit"></image>
			</addressPicker>	
		</view>
		<view class="message">
			<input type="text" placeholder="请填写详细地址" placeholder-style="color:#999999" :maxlength='50' :disabled='readOnly||isDesignerToEdit'  v-model.trim="officeDetailedAddress"/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">服务地区</view>
			<serviceAreaPick @confirm='changeServiceArea' :disabled='readOnly' :list='serviceAreaList.length>0?serviceAreaList:[]'>
				<view class="value" v-if="serviceArea" style="color: #333333">{{serviceArea}}</view>
				<view class="value" v-else>请选择服务地区</view>
				<image src="/static/svg/moreandmore.svg" class="more" v-if="!readOnly"></image>
			</serviceAreaPick>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">设计类型</view>
			<typePick @confirm='changeType' :disabled='readOnly' :chooselist='typeList'>
				<view class="value" v-if="newTypeList" style="color: #333333">{{newTypeList}}</view>
				<view class="value" v-else>请选择设计类型</view>
				<image src="/static/svg/moreandmore.svg" class="more" v-if="!readOnly"></image>
			</typePick>	
		</view>
		<view class="textarea">
			<textarea placeholder="请填写团队介绍…" placeholder-style="color:#999999" :maxlength='200' :disabled='readOnly'  v-model.trim="teamIntroduction"></textarea>
			<text>{{teamIntroduction.length}}/200</text>
		</view>
		<view class="title" style="margin-top: 29rpx;">
			<text>*</text>
			<text class="title_word">上传营业执照</text>
		</view>
		<view class="IDCard">
			<view v-if="!businessLicense">
				<image src="/static/svg/zhizhao.svg"   @tap="toAddImg" data-type='license'></image>
			</view>
			<imgDele :src="businessLicense" mode="aspectFill" @imgTap='licenseTap' @deleSuccess='deleLicense' :disabled='readOnly||isDesignerToEdit'  v-else></imgDele>
		</view>
		<view class="opinion" v-if='type!="isLoading"'>
			<view :class="{isAgree:isAgree}" @tap="isAgree=!isAgree"></view>
			<text>我已同意<text class="xieyi"  @tap="toHaveLook">《设计师入驻服务协议》</text></text>
		</view>
		<view class="button" :style="{backgroundColor:canSubmit?'':'#C8C8C8'}" @tap="toSubmit" v-if='type!="isLoading"'>
			<text>提 交</text>
		</view>
		<view style="height: 117rpx;" v-if='type!="isLoading"'></view>
		<view style="height: 71rpx;" v-else></view>
		<ImageCropper :src="url" @confirm="confirm" :crop-fixed="true" @cancel="cancel" :cropWidth='cropWidth?cropWidth:268' :class='{cropWidth:cropWidth}' :cropHeight='cropHeight?cropHeight:165'></ImageCropper>
		<picturePreview :list='imgList' :index='imgIndex' v-if='showPreview' :disabled='readOnly||isDesignerToEdit'  @confirm='deleSuccess' @cancel='cancelPreview'/>
	</view>
</template>

<script>
	import url from '@/common/util/personal.js'
	import picturePreview from "@/components/picturePreview/picturePreview.vue"
	import pageHeader from "@/components/header/header.vue"
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue"
	import imgDele from "@/components/dele/imgDele.vue"
	import ePicker from '@/components/e-picker/e-picker.vue'
	import addressPicker from '@/components/address-pick/address-pick.vue'
	import typePick from '@/components/specialPick/typePick.vue'
	import serviceAreaPick from '@/components/specialPick/serviceAreaPick.vue'
	export default {
		components: {pageHeader,ImageCropper,imgDele,ePicker,addressPicker,typePick,serviceAreaPick,picturePreview},
		data() {
			return {
				userId:localStorage.getItem("userId"),
				url:"",
				sex:"",
				chooseType:"",
				headImg:"",
				frontOfIDCard:"",
				backOfIDCard:"",
				businessLicense:"",
				imgSrc:"",
				cropWidth:0,
				cropHeight:0,
				birthDay:0,
				imgList:[],
				imgIndex:0,
				showPreview:false,
				tapImg:"",
				entryYear:"",
				locationCity:{},
				officeAddress:{},
				officeDetailedAddress:"",
				educationList:["小学","初中","高中","专科","本科","研究生","博士","其他"],
				education:"",
				name:"",
				major:"",
				phone:"",
				email:"",
				corporateName:"",
				typeList:[],
				teamIntroduction:"",
				serviceAreaList:[],
				isAgree:false,
				canSubmit:false,
				needTip:true,
				type:"",
				tipText:"",
				message1:{},
				readOnly:false,
				isDesignerToEdit:false,
				phoneError:false,
				emailError:false
			};
		},
		onLoad(e) {
			this.isDesignerToEdit=false
			this.needTip=false
			if(e.type){
				this.type=e.type
				if(this.type=='isLoading'){
					this.readOnly=true
				}
				this.getMessage()
			}else{
				this.type=""
			}
			if(e.isFrom){
				this.isDesignerToEdit=true
			}
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    },
			getYearList(){
				let date = new Date();
				let year = date.getFullYear();
				let list=[]	
				for(let a=1900;a<(year+1);a++){
					list.push(a+'年')
				}
				return list.reverse()
			},
			newTypeList(){
				let list=[]
				for(let a=0;a<this.typeList.length;a++){
					list.push(this.typeList[a].content)
				}
				if(list.length>0){
					return list.join('、')
				}else{
					return null
				}
			},
			serviceArea(){
				if(this.serviceAreaList.length>0){
					return this.serviceAreaList.join('、')
				}else{
					return null
				}
			},
			defualtEntryYear(){
				if(this.entryYear){
					if(this.getYearList.indexOf(this.entryYear)!=-1){
						return this.getYearList.indexOf(this.entryYear)
					}else{
						return 0
					}
				}else{
					return 0
				}
				
			},
			defualteducation(){
				if(this.education){
					if(this.educationList.indexOf(this.education)!=-1){
						return this.educationList.indexOf(this.education)
					}else{
						return 0
					}
				}else{
					return 0
				}
			}
		},
		watch: {
			name() {
				this.checkCan()
			},
			major(){
				this.checkCan()
			},
			phone(){
				this.checkCan()
			},
			email(){
				this.checkCan()
			},
			officeDetailedAddress(){
				this.checkCan()
			},
			teamIntroduction(){
				this.checkCan()
			},
			corporateName(){
				this.checkCan()
			},
			isAgree(){
				this.checkCan()
			}
		},
		methods:{
			async getMessage(){
				uni.showLoading({
					mask: true
				});
				let res=await url.getApplyInfo({userId:this.userId})
				uni.hideLoading()
				this.message1=res.data
				switch (this.type){
					case 'isLoading':
						this.tipText='审核中：工作人员会在三个工作日内审核完成，请及时查看。'
						this.needTip=true
						break;
					case 'isFrist':
						this.tipText='恭喜您，审核通过！'
						this.needTip=true
						url.fristSee({userId:this.userId})
						break;	
					case 'isReady':
						this.needTip=false
						this.tipText=""
						break;	
					case 'isError':
						this.tipText="审核失败："+res.data.reason+"。"
						this.needTip=true
						break;	
					default:
						break;
				}
				this.headImg=this.message1.headPicture
				this.name=this.message1.username?this.message1.username:this.message1.nickname
				this.sex=this.message1.sex
				this.birthDay=this.message1.birthday
				this.education=this.message1.academic
				this.major=this.message1.major
				this.phone=this.message1.telephone
				this.email=this.message1.email
				this.typeList=JSON.parse(this.message1.designType)
				this.locationCity={
					province:this.message1.liveAddress.province,
					city:this.message1.liveAddress.city,
					area:this.message1.liveAddress.Area,
				}
				this.entryYear=this.message1.designTime+"年"
				if(this.locationCity.province.indexOf('市')!=-1){
					this.locationCity.fullPath=this.locationCity.province+this.locationCity.area
				}else if(this.locationCity.city.indexOf('省直辖县级行政区划')!=-1||this.locationCity.city.indexOf('自治区直辖县级行政区划')!=-1){
					this.locationCity.fullPath=this.locationCity.province+this.locationCity.area
				}else{
					this.locationCity.fullPath=this.locationCity.province+this.locationCity.city+this.locationCity.area
				}
				this.frontOfIDCard=this.message1.idcardFace
				this.backOfIDCard=this.message1.idcardBack
				this.officeAddress={
					province:this.message1.workAddress.province,
					city:this.message1.workAddress.city,
					area:this.message1.workAddress.Area
				}
				if(this.officeAddress.province.indexOf('市')!=-1){
					this.officeAddress.fullPath=this.officeAddress.province+this.officeAddress.area
				}else if(this.officeAddress.city.indexOf('省直辖县级行政区划')!=-1||this.officeAddress.city.indexOf('自治区直辖县级行政区划')!=-1){
					this.officeAddress.fullPath=this.officeAddress.province+this.officeAddress.area
				}else{
					this.officeAddress.fullPath=this.officeAddress.province+this.officeAddress.city+this.officeAddress.area
				}
				this.corporateName=this.message1.companyName
				this.officeDetailedAddress=this.message1.workAddress.detailed
				this.serviceAreaList=this.message1.serviceAddress
				this.typeList=JSON.parse(this.message1.designType)
				this.teamIntroduction=this.message1.teamDetail
				this.businessLicense=this.message1.businessLicense[0]
			},
			checkCan(){
				let can=true
				if(!this.headImg){
					can=false
				}
				if(!this.name){
					can=false
				}
				if(!this.sex){
					can=false
				}
				if(!this.birthDay){
					can=false
				} 
				if(!this.education){
					can=false
				}
				if(!this.major){
					can=false
				}
				if(!/^1[0-9]{10}$/.test(this.phone)){
					can=false
				}
				if(this.email){
					if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)){
						can=false
					}
				}
				if(!this.locationCity.fullPath){
					can=false
				}
				if(!this.frontOfIDCard){
					can=false
				}
				if(!this.backOfIDCard){
					can=false
				}
				if(!this.corporateName){
					can=false
				}
				if(!this.officeAddress.fullPath){
					can=false
				}
				if(!this.officeDetailedAddress){
					can=false
				}
				if(!this.teamIntroduction){
					can=false
				}
				if(!this.businessLicense){
					can=false
				}
				if(!this.isAgree){
					can=false
				}
				if(!this.entryYear){
					can=false
				}
				if(this.serviceAreaList.length<=0){
					can=false
				}
				if(this.typeList.length<=0){
					can=false
				}
				this.canSubmit=can
			},
			back() {
				if(this.type=='isLoading'){
					uni.navigateBack({
						delta: 1
					})
					return
				}
				uni.showModal({
					content: '是否放弃当前操作？',
					cancelText:'否',
					confirmText:'是',
					success:res=> {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			chooseSex(e){
				if(this.readOnly||this.isDesignerToEdit){
					return
				}
				this.sex=e.currentTarget.dataset.type
				this.checkCan()
			},
			getDate(type) {
				let date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				if (type === 'start') {
			        year = 1900;
					month=1
					day=1
			    } else if (type === 'end') {
			        year = year;
			    }
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			chooseBirthDay(e){
				this.birthDay=e.selectTime
				this.checkCan()
			},
			changeYear(e){
				this.entryYear=this.getYearList[e.detail.value]
				this.checkCan()
			},
			changeCity(e){
				this.locationCity=e
				this.checkCan()
			},	
			changeAddress(e){
				this.officeAddress=e
				this.checkCan()
			},
			changeEducation(e){
				this.education=this.educationList[e.detail.value]
				this.checkCan()
			},
			changeType(e){
				this.typeList=e
				this.checkCan()
			},
			changeServiceArea(e){
				this.serviceAreaList=e
				this.checkCan()
			},
			toCheckError(e,type){
				switch (type){
					case 'phone':
						if(this.phone){
							if(!/^1[0-9]{10}$/.test(this.phone)){
								this.phoneError=true
							}else{
								this.phoneError=false
							}
						}else{
							this.phoneError=false
						}
						break;
					case 'email':
						if(this.email){
							if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)){
								this.emailError=true
							}else{
								this.emailError=false
							}
						}else{
							this.emailError=false
						}
						break;	
					default:
						break;
				}
			},
			frontOfIDCardTap(){
				this.imgList.push(this.frontOfIDCard)
				if(this.backOfIDCard){
					this.imgList.push(this.backOfIDCard)
				}
				this.imgIndex=0
				this.showPreview=true
			},
			backOfIDCardTap(){
				this.imgList.push(this.backOfIDCard)
				if(this.frontOfIDCard){
					this.imgList.unshift(this.frontOfIDCard)
					this.imgIndex=1
				}else{
					this.imgIndex=0
				}
				this.showPreview=true
			},
			licenseTap(){
				this.imgList.push(this.businessLicense)
				this.imgIndex=0
				this.tapImg='businessLicense'
				this.showPreview=true
			},
			deleSuccess(index){
				if(this.tapImg){
					this.deleLicense()
					this.cancelPreview()
					return
				}
				if(this.frontOfIDCard&&this.backOfIDCard){
					if(index==1){
						this.deleBackOfIDCard()
						this.imgIndex=0
						this.imgList.splice(1,1)
					}else{
						this.deleFrontOfIDCard()
						this.imgList.splice(0,1)
					}
				}else if(this.backOfIDCard){
					this.deleBackOfIDCard()
					this.cancelPreview()
				}else if(this.frontOfIDCard){
					this.deleFrontOfIDCard()
					this.cancelPreview()
				}
			},
			cancelPreview(){
				this.imgList=[]
				this.tapImg=''
				this.showPreview=false
			},
			deleFrontOfIDCard(){
				this.frontOfIDCard=''
				this.checkCan()
			},
			deleBackOfIDCard(){
				this.backOfIDCard=''
				this.checkCan()
			},
			deleLicense(){
				this.businessLicense=''
				this.checkCan()
			},
			toAddImg(e){
				if(this.readOnly){
					return
				}
				switch (e.currentTarget.dataset.type){
					case 'head':
						this.chooseType='headImg'
						this.cropWidth=200
						this.cropHeight=200
						break;
					case 'front':
						if(this.isDesignerToEdit){
							return
						}
						this.cropWidth=0
						this.cropHeight=0
						this.chooseType='frontOfIDCard'
						break;	
					case 'back':
						if(this.isDesignerToEdit){
							return
						}
						this.cropWidth=0
						this.cropHeight=0
						this.chooseType='backOfIDCard'
						break;	
					case 'license':
						if(this.isDesignerToEdit){
							return
						}
						this.cropWidth=0
						this.cropHeight=0
						this.chooseType='businessLicense'
						break;			
					default:
						if(this.isDesignerToEdit){
							return
						}
						break;
				}
				uni.chooseImage({
					count:1,
					sizeType: ['compressed', 'original'],
					sourceType: ['album', 'camera'],
				    success: (res) => {
				        // 设置url的值，显示控件
				        this.url = res.tempFilePaths[0];
				    }
				})
			},
			confirm(e) {
				uni.showLoading({
				    title: '上传中...',
				})
				this.url = ''
				uni.uploadFile({
				    url: 'http://classic.wljiam.com/caapi/card/insertreminder',
				    filePath: e.detail.tempFilePath,
				    name: 'file',
				    formData: {
				        'userId': localStorage.getItem("userId")
				    },
					success: (uploadFileRes) => {
						uni.hideLoading()
						this[this.chooseType]=JSON.parse(uploadFileRes.data).data
						this.checkCan()
						this.cropWidth=0
						this.cropHeight=0
				    }
				})
			},
			cancel(){
				this.url = ''
			},
			async toSubmit(){
				if(!this.canSubmit){
					return
				}
				let data={}
				data.userId=this.userId
				data.headPicture=this.headImg
				data.username=this.name
				data.sex=this.sex
				data.birthday=this.birthDay
				data.academic=this.education
				data.major=this.major
				data.telephone=this.phone
				data.email=this.email
				data.provinceLive=this.locationCity.province
				data.cityLive=this.locationCity.city
				data.areaLive=this.locationCity.area
				data.designTime=this.entryYear.replace("年","")
				data.idcardFace=this.frontOfIDCard
				data.idcardBack=this.backOfIDCard
				data.companyName=this.corporateName
				data.provinceWork=this.officeAddress.province
				data.cityWork=this.officeAddress.city
				data.areaWork=this.officeAddress.area
				data.detailedWork=this.officeDetailedAddress
				data.serviceAddress=this.serviceAreaList.join(',')
				data.designType=JSON.stringify(this.typeList)
				data.businessLicense=this.businessLicense
				data.teamDetail=this.teamIntroduction
				switch (this.type){
					case 'isLoading':
						break;
					case 'isFrist':
					case 'isError':	
					case 'isReady':
						let res1=await url.updateDesign(data)
						if(res1.code==0){
							uni.redirectTo({
								url: '/pages/personal/submitSucess?is=isDesigner'
							})
						}
						break;	
					default:
						let res=await url.applyDesign(data)
						if(res.code==0){
							uni.redirectTo({
								url: '/pages/personal/submitSucess?is=isDesigner'
							})
						}
						break;
				}
			},
			toHaveLook(){
				uni.navigateTo({
					url: '/pages/personal/settlementAgreement'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}
.title{
	padding-top: 4rpx;
	display: flex;
	align-items: center;
	height: 84rpx;
	padding-left: 30rpx;
	text{
		position: relative;
		font-size: 32rpx;
		letter-spacing: 1rpx;
		color: #333333;
		line-height: 32rpx;
		font-weight: bold;
	}
}
.title>text:not(.title_word){
	color:#C84739 ;
}
.title>.title_word::after{
	content: "";
	display: block;
	height: 6rpx;
	width: 34rpx;
	border-radius: 5rpx;
	background-color:#333333 ;
	position: absolute;
	left: 0rpx;
	bottom: -16rpx;
}
.message{
	display: flex;
	align-items: center;
	padding: 30rpx 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
	position: relative;
	min-height: 102rpx;
	.important{
		font-size:30rpx ;
		letter-spacing: 1rpx;
		line-height: 30rpx;
		color: #C84739;
		position: absolute;
		left: 30rpx;
	}
	.key{
		font-size:30rpx ;
		letter-spacing: 1rpx;
		line-height: 44rpx;
		color: #333333;
		position: absolute;
		left: 46rpx;
		width:128rpx;
		display: block;
		text-align: justify;
		height: 44rpx;
	}
	.value{
		display: flex;
		align-items: center;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #999999;
		line-height: 44rpx;
		min-height: 44rpx;
		width: 477rpx;
		margin-left: 179rpx;
	}
	.defaultHead{
		height: 86rpx;
		width: 86rpx;
		position: absolute;
		display: block;
		right: 64rpx;
		border-radius: 50%;
	}
	.more{
		height: 24rpx;
		width: 24rpx;
		position: absolute;
		display: block;
		right: 30rpx;
		top: 50%;
		margin-top:-12rpx;
	}
	input{
		width:450rpx ;
		font-size: 30rpx;
		height: 44rpx;
		letter-spacing: 1rpx;
		position: absolute;
		left: 211rpx;
		color: #333333;
	}
	.sex{
		position: absolute;
		left: 250rpx;
		width: 300rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		.man{
			height: 100%;
			display: flex;
			align-items: center;
			view{
				height: 16rpx;
				width: 16rpx;
				background-color:#EEEEEE ;
				border: 1rpx solid #999999;
				border-radius: 50%;
			}
			text{
				font-size:30rpx ;
				letter-spacing: 1rpx;
				color:#333333 ;
				line-height: 30rpx;
				margin-left: 12rpx;
			}
		}
		.sex_active{
			view{
				background-color:#C84739 ;
				border-color: #7F1509;
			}
		}
	}
}
.message>view{
	height: 100%;
}
.message>view>view{
	height: 100%;
}
.message>view>view>view{
	height: 100%;
}
.head{
	height: 126rpx;
}
.key::after{
	content: "";
	display: inline-block;
	width: 100%;
	height: 0;
	font-size: 0;
	line-height: 0;
}
.IDCard{
	margin-top:30rpx ;
	margin-bottom: 10rpx;
	display: flex;
	view{
		margin: 0 30rpx;
		height: 137rpx;
		width: 223rpx;
		border-radius: 10rpx;
		/deep/image{
			height: 100%;
			width: 100%;
			border-radius: 10rpx;
			display: block;
		}
	}
}
.textarea{
	height: 330rpx;
	border-bottom: 1rpx solid #EEEEEE;
	padding:22rpx 30rpx;
	padding-bottom: 58rpx;
	position: relative;
	textarea{
		height: 100%;
		width: 100%;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		text-align: justify;
	}
	text{
		font-size:26rpx ;
		color: #999999;
		letter-spacing: 1rpx;
		line-height: 26rpx;
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
	}
}
.opinion{
	display: flex;
	align-items: center;
	padding-left: 30rpx;
	margin-top:70rpx ;
	view{
		height:42rpx ;
		width: 42rpx;
		border-radius: 50%;
		border: 2rpx solid #DDDDDD;
	}
	text{
		font-size: 26rpx;
		color: #333333;
		letter-spacing: 1rpx;
		line-height: 26rpx;
		margin-left: 10rpx;
	}
	.xieyi{
		color:#549AEC;
		position: relative;
		margin-left: 0;
	}
}
.isAgree{
	background-image: url('/static/svg/isChoose.svg');
	background-position: 0 0 ;
	background-repeat: no-repeat;
	background-size: 100%;
	border: 0 !important;
}
.opinion>.xieyi::after{
	content: "";
	display: block;
	height: 1px;
	transform: scaleY(0.5);
	background-color: #549AEC;
	width: 97.037%;
	position: absolute;
	left: 0;
	bottom: -8rpx;
}
.button{
	height: 90rpx;
	width: 590rpx;
	margin: 122rpx auto 0rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color:#C84739 ;
	border-radius: 45rpx;
	text{
		white-space: pre;
		font-size:34rpx ;
		letter-spacing: 1rpx;
		color: #FFFAEB;
		line-height: 34rpx;
	}
}
.tip{
	padding: 14rpx 72rpx 14rpx 30rpx;
	text-align: justify;
	position: fixed;
	z-index: 5;
	top: 88rpx;
	width: 750rpx;
	background-color:rgba(200,71,57,0.7613) ;
	display: flex;
	align-items: center;
	text{
		font-size: 26rpx;
		line-height: 34rpx;
		color:#FFFFFF ;
		letter-spacing: 1rpx;
	}
	image{
		height:22rpx ;
		width: 24rpx;
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		display: block;
	}
}
.cropWidth /deep/ .cropper-view-box{
	outline:0;
	border-radius:50%;
	border:1px solid #39f
}
.gantanhao{
	height: 32rpx;
	width: 32rpx;
	position: absolute;
	right: 30rpx;
}
</style>
